body{
    background: #cdadf4;
    overflow: hidden;
}
.nn1{
    font-size: 14px;
    transform-style: preserve-3d;
    animation-name: move;
    /*动画名字*/
    animation-duration: 8s;
    /*动画旋转时间*/
    animation-iteration-count: infinite;
    /*动画的运动曲线*/
    animation-timing-function: linear;
    /*播放一次后逆向播放*/
    animation-direction: alternate;
    transition: transform 8s ;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}
@keyframes move {
    from{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}
.nn1 div{
    width: 80px;
    height: 80px;
    border: 1px solid #cdf413;
    text-align: center;
    line-height: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-style: preserve-3d;
    border-radius: 20%;
    box-shadow: 0 0 2em #dd1c14;
}
.nn1 img{
    width: 80px;
    height: 80px;
    border: 1px solid #cdf413;
    text-align: center;
    line-height: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-style: preserve-3d;
    border-radius: 20%;
    box-shadow: 0 0 2em #dd1c14;
}
.hh1{
    transform: translateX(40px) rotateY(90deg);
}
.hh2{
    transform: translateX(-40px) rotateY(90deg);
}
.hh3{
    transform: translateY(40px) rotateX(90deg);
}
.hh4{
    transform: translateY(-40px) rotateX(90deg);
}
.hh5{
    transform: translateZ(40px);
}
.hh6{
    transform: translateZ(-40px);
}
@keyframes move {
    from{
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}
